<template>
  <view class="screen">
    <view class="screen-cross" id="crossRef">
      <view class="cross-box">
        <text class="cross-item" :class="aclickId === '' ? 'active' : ''" @click="chooseTag('')">全部</text>
        <text
          class="cross-item"
          :class="item.id === aclickId ? 'active' : ''"
          v-for="item in classifyList"
          :key="item.id"
          @click="chooseTag(item.id)"
        >
          {{ item.name }}
        </text>
      </view>
      <view class="cross-option" @click="downOption">
        <i class="iconfont" :class="isOpen ? 'tz-arrow_down_small' : 'tz-a-arrow_down_small1'"></i>
      </view>
    </view>
    <van-popup
      :show="isOpen"
      overlay-style="position: absolute;height:100vh;top:105rpx;"
      custom-style="position:absolute;top:0;left:0;width:100%;top:105rpx;max-height:initial;border-radius: 0rpx 0rpx 32rpx 32rpx;transform: initial;"
    >
      <view class="screen-all">
        <text class="cross-item" :class="aclickId === '' ? 'active' : ''" @click="chooseTag('')">全部</text>
        <text
          class="cross-item"
          :class="item.id === aclickId ? 'active' : ''"
          v-for="item in classifyList"
          :key="item.id"
          @click="chooseTag(item.id)"
        >
          {{ item.name }}
        </text>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { onShow } from '@dcloudio/uni-app'
export default {
  name: 'screen',
  props: {
    topStr: String,
  },
  setup(props, { emit }) {
    const userStore = useUserStore()
    const state = reactive({
      isOpen: false,
      aclickId: '',
      classifyList: [],
    })
    const downOption = () => {
      state.isOpen = !state.isOpen
    }
    const chooseTag = (id) => {
      state.aclickId = id
      emit('chooseTag', id)
    }
    onShow(() => {
      const { classify } = userStore.getField()
      state.classifyList = classify
    })
    return {
      ...toRefs(state),
      downOption,
      chooseTag,
    }
  },
}
</script>

<style lang="scss" scoped>
.screen {
  position: relative;
  &-cross {
    position: relative;
    z-index: 3;
    height: 56rpx;
    padding: 24rpx 24rpx 0 24rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .cross-box {
      display: flex;
      overflow-x: auto;
      .cross-item {
        flex-shrink: 0;
        font-weight: 400;
        color: #6c7385;
        line-height: 48rpx;
        height: 56rpx;
        font-size: 28rpx;
        margin-right: 32rpx;
        &.active {
          color: #2b303b;
          font-weight: bold;
          background: url('~@/static/images/icon/icon-1.png') no-repeat center bottom;
          background-size: 24rpx 8rpx;
        }
      }
    }
    .cross-option {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      height: 48rpx;
      padding-left: 5rpx;
      display: flex;
      align-items: center;
      background: #fff;
      .iconfont {
        font-size: 32rpx;
      }
    }
  }
  .screen-all {
    display: flex;
    flex-wrap: wrap;
    z-index: 3;
    padding: 10rpx 24rpx 24rpx;
    background: #fff;
    border-radius: 0rpx 0rpx 32rpx 32rpx;
    .cross-item {
      width: 122rpx;
      height: 64rpx;
      padding: 0 20rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 24rpx;
      margin: 0 12rpx 10rpx 0;
      color: #2b303b;
      background: #f5f6fa;
      border: 2rpx solid #f5f6fa;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
      @include text-ellipsis(1);
      &.active {
        background: none;
        border-color: #3775f2;
        color: #3775f2;
      }
    }
  }
  .screen-bg {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 2s;
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>
